<template>
  <div class="bigDiv">
    <div class="leftDiv">
      <div class="leftTopContent">
        <div class="contentItem" style="display:flex;">
          <div><img src="../../img/icon.jpg" alt="用户头像"></div>
          <div style="display:flex; flex-direction: column;">
            <div><span>{{ residentFiles.residentFiles_Name }}</span></div>
            <div><span>{{ residentFiles.sex }} {{ residentFiles.age }}岁</span></div>
          </div>
        </div>
    
      </div>
      <div class="leftDownContent">
          <h2>健康概况</h2>
          <div style="display:flex; justify-content: space-between; align-items: center;">
            <span>身高：{{ residentFiles.height }}CM</span>
            <span>体重：{{ residentFiles.weight }}KG</span>
          </div>
          <div style="display:flex; justify-content: space-between; align-items: center;">
            <span>BMI：{{ residentFiles.bmi }}</span>
            <span>腰围：{{ residentFiles.waistline }}CM</span>
          </div>
          <div><span>是否吸烟：{{ residentFiles.ifSmoke ? '是' : '否' }}</span></div>
          <div><span>是否饮酒：{{ residentFiles.ifDrinkWine ? '是' : '否' }}</span></div>
          <div><span>是否运动：{{ residentFiles.ifSport === 0 ? '否' : '是' }}</span></div>
      </div>
    </div>
    <div class="rightDiv">
      <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="基础档案" name="first">
          <div>
            <h3 style="border-left:10px solid blue;border-bottom:2px grey solid;">基本信息</h3>
            <el-row :gutter="20">
              <el-col :span="12"><span>姓名：{{ residentFiles.residentFiles_Name }}</span></el-col>
              <el-col :span="12"><span>性别：{{ residentFiles.sex }}</span></el-col>
              <el-col :span="12"><span>身份证号：{{ residentFiles.idCard }}</span></el-col>
              <el-col :span="12"><span>出生日期：{{ residentFiles.birthday }}</span></el-col>
              <el-col :span="12"><span>联系电话：{{ residentFiles.phone }}</span></el-col>
              <el-col :span="12"><span>婚姻状况：{{ residentFiles.marriage }}</span></el-col>
              <el-col :span="12"><span>国籍：中国</span></el-col>
              <el-col :span="12"><span>民族：汉族</span></el-col>
              <el-col :span="12"><span>文化程度：{{ residentFiles.education }}</span></el-col>
              <el-col :span="12"><span>职业：{{ residentFiles.job }}</span></el-col>
              <el-col :span="12"><span>血型：{{ residentFiles.bloodType }}</span></el-col>
              <el-col :span="12"><span>RH血型：</span></el-col>
              <el-col :span="12"><span>常住类型：户籍</span></el-col>
              <el-col :span="12"><span>参保情况：{{ residentFiles.insuredSituation }}</span></el-col>
            </el-row>
            <h3 style="border-left:10px solid blue;border-bottom:2px grey solid;">家庭情况</h3>
            <el-row :gutter="20">
              <el-col :span="12"><span>居住面积：&lt;50㎡</span></el-col>
              <el-col :span="12"><span>家居人数：3人</span></el-col>
              <el-col :span="24"><span>居住情况：家人同住</span></el-col>
            </el-row>
            <h3 style="border-left:10px solid blue;border-bottom:2px grey solid;">既往病史</h3>
            <el-row :gutter="20">
              <!-- 既往病史内容 -->
            </el-row>
            <h3 style="border-left:10px solid blue;border-bottom:2px grey solid;">家族史</h3>
            <el-row :gutter="20">
              <!-- 家族史内容 -->
            </el-row>
            <h3 style="border-left:10px solid blue;border-bottom:2px grey solid;">过敏史</h3>
            <el-row :gutter="20">
              <!-- 过敏史内容 -->
            </el-row>
            <h3>签约情况</h3>
            <el-row :gutter="20">
              <!-- 签约情况内容 -->
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="就诊记录" name="second">
               <el-table :data="residentFiles.medicalRecords" style="width: 100%">
                  <el-table-column prop="medical_Type" label="就诊类型" width="180">
                    <template #default="scope">
                      {{ scope.row.medical_Type === 1 ? '住院' : '门诊' }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="medical_Organ" label="就诊机构" width="180"></el-table-column>
                  <el-table-column prop="medical_Diagnose" label="诊断"></el-table-column>
                  <el-table-column prop="dockor" label="就诊医生" width="180"></el-table-column>
                  <el-table-column prop="medical_StartTime" label="就诊时间" width="180">
                    <template #default="scope">
                      {{ new Date(scope.row.medical_StartTime).toLocaleString() }}
                    </template>
                  </el-table-column>
                  <!-- <el-table-column fixed="right" label="操作" width="100">
                    <template #default="scope">
                      <el-button link type="primary" size="small" @click="viewDetails(scope.row)">详情</el-button>
                    </template>
                  </el-table-column> -->
            </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import $ from 'jquery'
import axios from 'axios';
import { onMounted, reactive, ref,watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';
import { useCounterStore } from '@/stores/counter';
import type { TabsPaneContext } from 'element-plus';
const apiUrl = import.meta.env.VITE_APP_API_URL;

const store = useCounterStore();
// 引入路由对象
const router = useRouter();
const route = useRoute();
const activeName = ref('first')
const ResidentFiles_Id = ref(0);

interface ResidentFiles {
  residentFiles_Id: number;
  residentFiles_Name: string;
  sex: string;
  age: number;
  idCard: string;
  phone: string;
  birthday: string;
  address: string;
  marriage: string;
  bloodType: string;
  insuredSituation: string;
  job: string;
  education: string;
  ifSmoke: boolean;
  ifQuitSmoke: boolean;
  ifPassiveSmoke: boolean;
  ifDrinkWine: boolean;
  ifSport: number;
  hypertension: number;
  diabetes: number;
  height: number;
  weight: number;
  bmi: number;
  waistline: number;
  systolicPressure: number;
  siastolicPressure: number;
  fastingBloodGlucose: number;
  createUser: string;
  createTime: string;
  updateUser: string;
  updateTime: string;
  team: any;
  doctor: any;
  sign_Status: number;
  sign_StartTime: any;
  sign_EndTime: any;
  medicalRecords: any[];
}
const residentFiles = reactive<ResidentFiles>({
  residentFiles_Id: 0,
  residentFiles_Name: '',
  sex: '',
  age: 0,
  idCard: '',
  phone: '',
  birthday: '',
  address: '',
  marriage: '',
  bloodType: '',
  insuredSituation: '',
  job: '',
  education: '',
  ifSmoke: false,
  ifQuitSmoke: false,
  ifPassiveSmoke: false,
  ifDrinkWine: false,
  ifSport: 0,
  hypertension: 0,
  diabetes: 0,
  height: 0,
  weight: 0,
  bmi: 0,
  waistline: 0,
  systolicPressure: 0,
  siastolicPressure: 0,
  fastingBloodGlucose: 0,
  createUser: '',
  createTime: '',
  updateUser: '',
  updateTime: '',
  team: null,
  doctor: null,
  sign_Status: 0,
  sign_StartTime: null,
  sign_EndTime: null,
  medicalRecords: []
});
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}


onMounted(() => {
  ResidentFiles_Id.value = route.query.id as unknown as number;
  axios.get(apiUrl+`/T7/ResidentFiles/GetResidentFilesDetail?ResidentFiles_Id=${ResidentFiles_Id.value}`)
    .then(response => {
      if (response.data.code === 210) {
        Object.assign(residentFiles, response.data.data);
        residentFiles.medicalRecords = response.data.data.medicalRecords;
      } else {
        ElMessage.error(response.data.msg);
      }
    })
    .catch(error => {
      ElMessage.error('请求失败');
      console.error(error);
    });
});
</script>

<style scoped>
 .bigDiv{width:100%;height:100%;margin:0;display: flex;} 
 .leftDiv{display:flex;flex:1.7;padding:1%;background-color: #fff;margin-right:1%;flex-direction: column;min-width: 200px;}
 .rightDiv{display:flex;flex:8.3;padding:1%;background-color: #fff;flex-direction: column;}
.leftTopContent{width:100%;border-bottom: grey 1px solid;margin-bottom: 1vh;;}
.leftDownContent{width:100%;}

.demo-tabs > .el-tabs__header {
  margin-bottom: 0px;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>